<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/vue.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/index.js"></script>

</head>
<body>
<div id="app">

    用户名：
    <el-input v-model="pageUser.username" placeholder="根据用户名搜索" style="width: 200px;"></el-input>

    性别：
    <el-input v-model="pageUser.gender" placeholder="根据性别搜索" style="width: 200px;"></el-input>

    邮箱：
    <el-input v-model="pageUser.email" placeholder="根据邮箱搜索" style="width: 200px;"></el-input>

    <el-button @click="find">查询</el-button>
    <el-button @click="add">添加</el-button>

    <el-table :data="tableData" stripe>
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column label="操作" align="center">
            <!--
            slot-scope：作用域插槽，可以获取表格数据
            scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
            -->
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑
                </el-button>
                <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.pageCurrent"
            :page-size="pagination.pageSize"
            :page-sizes="[5, 10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            align="center">
    </el-pagination>

    <el-dialog
            title="添加用户"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">

        <el-form :model="formData">
            <el-row>
                <el-col>
                    <el-form-item label="序号">
                        <el-input v-model="formData.id"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="用户名">
                        <el-input v-model="formData.username"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="性别">
                        <el-input v-model="formData.gender"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="密码">
                        <el-input v-model="formData.password"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="邮箱">
                        <el-input v-model="formData.email"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取消</el-button>
    <el-button type="primary" @click="handleAdd">确定</el-button>
  </span>
    </el-dialog>
    <el-dialog
            title="修改用户"
            :visible.sync="dialogVisible2"
            width="50%"
            :before-close="handleClose">

        <el-form :model="formData">
            <el-row>
                <el-col>
                    <el-form-item label="序号">
                        <el-input v-model="formData.id"
                                  :disabled="true"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="用户名">
                        <el-input v-model="formData.username"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="性别">
                        <el-input v-model="formData.gender"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="密码">
                        <el-input v-model="formData.password"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="邮箱">
                        <el-input v-model="formData.email"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取消</el-button>
    <el-button type="primary" @click="Update">确定</el-button>
  </span>
    </el-dialog>
</div>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            tableData:[],
            formData:{},
            dialogVisible:false,
            dialogVisible2:false,
            pagination:{
                pageCurrent:1,
                pageSize:10,
                total:1
            },
            pageUser:{
                username:'',
                gender:'',
                email:''
            }
        },
        created() {
            this.find();
        },
        methods: {
            handleClose(){
                this.dialogVisible=false
                this.dialogVisible2=false
                this.formData={}
                this.$message.info('已取消')
            },
            handleUpdate(row) {
                this.dialogVisible2=true
                this.formData=row
            },
            handleDelete(row) {
                this.$confirm('确认删除？','提示',{
                    type:'warning'
                }).then(()=>{
                        axios({
                            method: 'delete',
                            url:'/users1/'+row.id
                        }).then(res=>{
                            this.find()
                            if(res.data.flag){
                                this.$message.success(res.data.message)
                            }else{
                                this.$message.error(res.data.message)
                            }
                        })
                }).catch(res=>{
                    this.$message.info('已取消')
                })
            },
            find() {
                axios({
                    method:'post',
                    url:'/users1/'+this.pagination.pageCurrent+'/'+this.pagination.pageSize,
                    data:this.pageUser
                }).then(res=>{
                    this.tableData=res.data.data.users
                    this.pagination.total=res.data.data.total
                })

            },
            handleSizeChange(size) {
                this.pagination.pageSize=size
                this.find()
            },
            handleCurrentChange(page) {
                this.pagination.pageCurrent=page
                this.find()
            },
            add() {
                this.dialogVisible=true
            },
            cancel() {
                this.dialogVisible=false
                this.dialogVisible2=false
                this.formData={}
                this.$message.info('已取消')
            },
            Update(){
                axios({
                    method:'put',
                    url:'/users1',
                    data:this.formData
                }).then(res=>{
                    this.find()
                    this.dialogVisible2=false
                    this.formData={}
                    if(res.data.flag){
                        this.$message.success(res.data.message)
                    }else{
                        this.$message.error(res.data.message)
                    }
                })
            },
            handleAdd() {
                axios({
                    method:'post',
                    url:'/users1',
                    data:this.formData
                }).then(res=>{
                    this.find()
                    this.dialogVisible=false
                    this.formData={}
                    if(res.data.flag){
                        this.$message.success(res.data.message)
                    }else{
                        this.$message.error(res.data.message)
                    }
                })
            }
        }
    });
</script>
</body>
</html>